/**
 *  获取初始化画布的size
 */

interface ISize {
  width: number;
  height: number;
}

interface ILayout {
  id: string;
}

export class Layout {
  size: ISize = {
    width: 0,
    height: 0,
  };

  constructor(props: ILayout) {
    this.initSize(props?.id);
  }

  initSize(id: string) {
    this.size = {
      width: document.getElementById(id)?.clientWidth as number,
      height: document.getElementById(id)?.clientHeight as number,
    };
  }

  onResize(id: string, onCanvasResize: (w: any, h: any) => any) {
    //侦听画布大小做出改变
    let box = document.getElementById(id);

    let iframeDesigner = document.getElementById('iframe-layout-designer');

    if (iframeDesigner) {
      iframeDesigner.remove();
    }

    let iframe = document.createElement('iframe');

    iframe.setAttribute('id', 'iframe-layout-designer');

    iframe.style.cssText =
      'height:100%; width:100%; position:absolute; left:0px; top:0px; z-index:-999;';

    box?.appendChild(iframe);

    if (iframe && iframe.contentDocument?.body) {
      iframe.contentDocument.body.onresize = () => {
        let w = box?.clientWidth;
        let h = box?.clientHeight;
        onCanvasResize(w, h);
      };
    }
  }

  unmount() {}
}
